<template>
   <!-- 循环列表 -->
    <div class="list-item" v-for="item in categoryList" :key="item.albumId" @click="toParticulars(item.albumId)">
      <img :src=" `https://imagev2.xmcdn.com/${item.albumCoverPath} `" class="img"/>
      <div class="right">
        <div class="headline">{{ item.albumTitle }}</div>
        <div class="synopsis">{{ item.intro }}</div>
        <div class="play-listen">
          <div class="play">
            <span class="el-icon-vuesax-outline-sound" ></span>
            {{ item.albumTrackCount }}
          </div>
          <div class="listen">
            <el-icon class="icon"><Headset /></el-icon>
            {{ item.count}}
          </div>
        </div>
      </div>
    </div>
    <van-overlay :show="show" z-index="0"  class="mask"/>
</template>

<script setup lang="ts">
import type { AlbumsModel } from '@/common/interface'
import { Headset} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
const router = useRouter()


const props = defineProps<{
  categoryList: AlbumsModel[],
  show:boolean
}>()

const toParticulars = (albumId :number) => {
  router.push({
    name: 'Particulars',
    params: {
      albumId:albumId
    }
  })
}
</script>

<style scoped lang="scss">
  .list-item {
    margin-left: 15px;
    padding: 15px 10px 15px 0;
    display: flex;
    border-bottom: 1px solid #f3f1f1;
    .img {
      width: 70px;
      height: 70px;
      margin-right: 15px;
    }
    .right {
      .headline {
        font-size: 16px;
        width: 268px;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .synopsis {
        font-size: 13px;
        line-height: 20px;
        color: #999;
        margin: 7px 0 10px;
      }
      .play-listen {
        display: flex;
        font-size: 12px;
        color: #999;
        .play {
          margin-right: 10px;
        }
        .icon{
          z-index: -1;
        }
      }
    }
  }

  .mask{
    --van-overlay-background:rgba(0, 0, 0 ,.3);
  }
</style>